<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    back
    :title="title"
    :stayStill="stayStill"
    bgColor="white"
    :showTop="showTop"
    :dark="loaded ? false : true"
    :hideSafeArea="true"
  >
    <view :class="['wrapper']">
      <view class="content">
        <template v-for="(item, index) in imgListMapper[rightId] || []">
          <image mode="widthFix" style="width: 100vw" :src="item" :key="index">
          </image>
        </template>
      </view>
      <view class="buyButton" v-if="productSign == 'ZHITU_TOC_SERVICE'">
        <view class="buyPackage" @click="showBuyList">
          职途权益套餐
          <view class="least-price" v-if="showLeastPrice == 0"></view>
        </view>
        <view class="buySingle" @click="handleBottomBtnClick"
          >限时特惠
          <view
            style="
              margin-left: 24rpx;
              font-size: 30rpx;
              font-family: 'D-DIN-PRO-700-Bold';
              margin-top: 8rpx;
            "
            >￥ </view
          ><span
            style="font-size: 44rpx; font-family: 'D-DIN-PRO-500-Medium'"
            >{{ rightProductDetail.price }}</span
          >
          <view style="font-size: 22rpx; margin: 6rpx 0 0 6rpx">/份</view>
        </view>
      </view>
      <view
        class="bottomBtn"
        @click="handleBottomBtnClick"
        v-else-if="rightProductDetail.price"
      >
        <view class="textContainer">
          <view class="btnText"
            >限时特惠<text class="rmb">¥ </text>
            <text class="priceNum">{{ rightProductDetail.price }}</text
            >/次
          </view>
          <view
            class="slashText"
            v-if="rightProductDetail.originPrice != rightProductDetail.price"
          >
            原价¥{{ rightProductDetail.originPrice }}</view
          >
        </view>
      </view>

      <ShoppingCar
        v-if="showPopup"
        :showPopup="showPopup"
        @closePopup="closePopup"
      ></ShoppingCar>
    </view>

    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import { env } from '@/api/root';
import {
  getRightDetail,
  addCartAndToOrder,
  addZhituPayOrder,
  getProductGroup,
  getCardRightPackage,
  getPersonOneRight,
  getPersonRightNum
} from '@/api/modules/career';
import LoginDialog from '@/components/LoginDialog';
import ShoppingCar from '../components/ShoppingCar.vue';
export default {
  components: {
    LoginDialog,
    ShoppingCar
  },
  data() {
    return {
      showLeastPrice: 0,
      productSign: '',
      currentPackage: 0,
      chosenNum: 0,
      sumPrice: 0,
      discountPrice: 0,
      shopList: [],
      showPopup: false,
      title: '',
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      navHeight: getApp().globalData.navHeight,
      rightId: null,
      cardType: null,
      stayStill: false, //顶部是否自己占位置
      showTop: false, //顶部是否透明
      //mapper以rightId作为键值
      //根据不同的rightId展示不同的样式，背景图
      nameMapper: {
        1: '性格测评', //disc测评
        2: '职业测评', //职业测评
        4: '简历诊断', //简历诊断
        7: '职途报告', //职途报告
        9: '职业报告', //职业报告
        17: 'AI面试' //AI面试
      },
      imgListMapper: {
        1: [this.$imgBase + 'careerPath/zhituDiscTestBG_3x.png'],
        2: [this.$imgBase + 'careerPath/zhituCareerTestBG.jpg?v=1'],
        4: [
          this.$imgBase + 'careerPath/zhituResumeDiagnosisBG.png?v=1',
          this.$imgBaseSelf + 'career/diagnosis/2.png',
          this.$imgBaseSelf + 'career/diagnosis/3.png',
          this.$imgBaseSelf + 'career/diagnosis/4_new.png'
        ],
        7: [this.$imgBase + 'careerPath/zhituCareerPathReportBG_3x.png'],
        9: [this.$imgBase + 'careerPath/zhituCareerReportBG_3x.png'],
        17: [this.$imgBase + 'careerPath/zhituAiInterviewBG_3x.png']
      },
      rightProductDetail: {},
      provider: {},
      assessmentVersion: uni.getStorageSync('assessmentVersion')
    };
  },
  components: { ShoppingCar },
  created() {
    uni.showLoading({
      title: '获取服务信息中...',
      mask: true
    });
    //获取支付提供商
    uni.getProvider({
      service: 'payment',
      success: (res) => {
        this.provider = res.provider;
        // console.log("this.provider", this.provider);
      }
    });
  },
  onPageScroll(e) {
    if (this.rightId == 4) retrun;
    //滚动改变颜色
    if (e.scrollTop >= 64) {
      this.showTop = true;
      this.title = this.nameMapper[this.rightId];
    } else {
      this.showTop = false;
      this.title = '';
    }
  },
  onLoad(opt) {
    this.rightId = opt.rightId;
    this.cardType = opt.cardType;
    //简历诊断时特殊处理
    if (opt.rightId == 4) {
      this.stayStill = true;
      this.showTop = true;
      this.title = '简历诊断';
      this.navHeight = 0;
    }
    this.getRightDetail();
    console.log('opt.rightId', opt.rightId);

    switch (+opt.rightId) {
      case 1: //disc测评
        console.log('触发disc测评上报', opt.rightId);
        wx.reportEvent('disc_buy_page', {});
        break;
      case 2: //职业测评
        console.log('触发职业测评上报', opt.rightId);
        wx.reportEvent('career_assess_buy_page', {});
        break;
      case 4: //简历诊断
        console.log('触发简历诊断上报', opt.rightId);
        wx.reportEvent('resume_diagnosis_buy_page', {});
        break;
      case 7: //职途报告
        console.log('触发职途报告上报', opt.rightId);
        wx.reportEvent('career_path_report_buy_page', {});
        break;
      case 9: //职业报告
        console.log('触发职业报告上报', opt.rightId);
        wx.reportEvent('career_report_buy_page', {});
        break;
      case 17: //AI面试
        console.log('触发AI面试上报', opt.rightId);
        wx.reportEvent('ai_interview_buy_page', {});
        break;

      default:
        break;
    }

    //先判断是否已经有这个权益,如果有修改按钮为去使用
    // this.checkRightNowInfo();
  },
  mounted() {
    this.getCardRightPackageFn();
  },

  methods: {
    loginSuccessBack() {
      this.personId = uni.getStorageSync('person-id').slice(2) || undefined;
    },
    showLoginDialog() {
      uni.setStorageSync('isZhituUser', true); //职途用户标识（注册的时候传regSource用
      this.$refs.loginDialog.setVisibility(true);
      this.getProductGroupFn();
    },
    async getCardRightPackageFn() {
      const params = {
        cardType: uni.getStorageSync('cardType')
      };
      const res = await getCardRightPackage(params);
      if (res.code == 200) {
        if (res.data[0]) {
          this.productSign = res.data[0].productSign;
          this.showLeastPrice = res.data[0].isFree;
        }
      }
    },
    chooseCurrentPackage(index) {
      this.currentPackage = index;
    },
    //还要订阅一下支付，退费相关信息
    handlePaySubscribe() {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      uni.requestSubscribeMessage({
        tmplIds: ['neXhGgVHV7JGNqQZOfu30pQmQcZIFUy73CBvK5OF98M'],
        complete: (res) => {
          Object.keys(res).forEach((key) => {
            if (res[key] === 'accept') {
              this.addCartAndToOrder();
            }
          });
        }
      });
    },
    handleBottomBtnClick() {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }

      this.handlePaySubscribe();
    },
    async getPersonRightNumFn(rightId) {
      const params = {
        personId: this.personId || undefined,
        rightId,
        cardType: uni.getStorageSync('cardType')
      };
      const res = await getPersonRightNum(params);
      return res.data.ownNum - res.data.useNum;
    },
    //请求当前权益的最新状态
    checkRightNowInfo(item) {
      const rightPersonId = this.personId;
      const rightPersonName = uni.getStorageSync('personName');
      const rightId = this.rightId;
      getPersonOneRight({ rightId, personId: rightPersonId }).then(
        async (res) => {
          const nowRightStatus = res.data.rightStatus;
          const nowRightItem = res.data;
          console.log('nowRightItem', nowRightItem);

          const childItem = res.data.children ? res.data.children[0] : {};
          //4是未购买,
          if (nowRightStatus == 4) {
          } else {
            //否则跳去使用页
            uni.showToast({
              icon: 'none',
              title: '您已拥有此权益',
              duration: 3000
            });
            //性格测评
            if (rightId == 1) {
              const discLeftUseNum = await this.getPersonRightNumFn(1); // 性格测评的内层rightId是1
              if (nowRightStatus == 1) {
                let url;
                if (env == 'test') {
                  url = `https://3gtest.crm1001.com/disc/#/disc/question?personId=${rightPersonId}&iname=${rightPersonName}&phone=18825449087&from=careerPathResult&discLeftUseNum=${discLeftUseNum}&cardType=${this.cardType}`;
                } else if (env == 'pro' || env == 'pre') {
                  url = `https://3g.crm1001.com/v2/disc/#/disc/question?personId=${rightPersonId}&iname=${rightPersonName}&phone=18825449087&from=careerPathResult&discLeftUseNum=${discLeftUseNum}&cardType=${this.cardType}`;
                }
                uni.navigateTo({
                  url:
                    '/pagesSub/public/web/descWebView?link=' +
                    encodeURIComponent(url)
                });
              }
              if (
                (nowRightStatus == 2 || nowRightStatus == 3) &&
                nowRightItem.extra &&
                nowRightItem.extra.userId
              ) {
                let url;
                const userId = nowRightItem.extra.userId;
                if (env == 'test') {
                  url = `https://3gtest.crm1001.com/disc/#/disc/result?userId=${userId}&personId=${rightPersonId}&iname=${rightPersonName}&phone=18825449087&from=careerPathResult&discLeftUseNum=${discLeftUseNum}&cardType=${this.cardType}`;
                } else if (env == 'pro' || env == 'pre') {
                  url = `https://3g.crm1001.com/v2/disc/#/disc/result?userId=${userId}&personId=${rightPersonId}&iname=${rightPersonName}&phone=18825449087&from=careerPathResult&discLeftUseNum=${discLeftUseNum}&cardType=${this.cardType}`;
                }
                uni.navigateTo({
                  url:
                    '/pagesSub/public/web/descWebView?link=' +
                    encodeURIComponent(url)
                });
              }
              if (nowRightStatus == 3 && !nowRightItem.extra) {
                uni.showToast({
                  icon: 'none',
                  title: '该服务已经过期!',
                  duration: 1000
                });
              }
            }

            // 职业测评
            if (rightId == 2) {
              if (nowRightStatus == 1) {
                uni.navigateTo({
                  url: `/pagesSub/career/activity/vocationalAssessment?personId=${rightPersonId}`
                });
              } else {
                uni.navigateTo({
                  url: `/pagesSub/careerAssessResultActNew/index?personId=${rightPersonId}`
                });
                // if (!this.assessmentVersion || this.assessmentVersion == '1') {
                //   uni.navigateTo({
                //     url: `/pagesSub/career/activity/CareerAssessResultAct?personId=${rightPersonId}`
                //   });
                // } else if (this.assessmentVersion == '2') {
                //   uni.navigateTo({
                //     url: `/pagesSub/careerAssessResultActNew/index?personId=${rightPersonId}`
                //   });
                // }
              }
            }

            // 职业报告,其实就是职业测评结果页面的职业报告
            if (rightId == 9 || rightId == 12) {
              //点击职业报告的时候现请求一下是否做完了职业测评
              uni.navigateTo({
                url: `/pagesSub/careerNew/selectCareerReport/index?rightCount=${
                  nowRightItem.rightCount || 3
                }&rightId=9`
              });
            }
            if (rightId == 3) {
              uni.navigateTo({
                url: '/pagesSub/newResume/index'
              });
            }
            //简历诊断
            if (rightId == 4) {
              //未使用
              if (nowRightStatus == 1) {
                uni.navigateTo({
                  url: '/pagesSub/AIResumeDiagnoseNew/index'
                });
                //已使用
              } else if (nowRightStatus == 2) {
                uni.navigateTo({
                  url: `/pagesSub/newResume/resumeAssessment/index?target=AIResumeDiagnoseNew`
                });
              }
            }
            //顾问简历诊断解析
            if (rightId == 15) {
              if (nowRightStatus == 1) {
                console.log('请联系顾问进行简历诊断解析');
              } else {
                if (nowRightItem.extra.fileUrl) {
                  this.openReport(nowRightItem.extra.fileUrl);
                }
              }
            }

            //ai面试
            if (this.rightId == 17) {
              this.handleCareerReport(2, item);
            }
            //职途报告21是第一级，7是第二级
            if (rightId == 7) {
              if (nowRightStatus == 1) {
                uni.showToast({
                  icon: 'none',
                  title: '请咨询顾问生成职途报告！',
                  duration: 1000
                });
                uni.navigateTo({
                  url: `/pagesSub/userCenter/careerPathV2/index`
                });
              } else if (nowRightStatus == 2) {
                const url = nowRightItem.extra.pdfUrl
                  ? nowRightItem.extra.pdfUrl
                  : nowRightItem.extra.pdfUrlV2;
                this.openReport(url);
              }
            }
          }
        }
      );
    },
    //打开PDF
    openReport(fileUrl) {
      if (!fileUrl) {
        uni.showToast({
          icon: 'none',
          title: '打开职业报告出错！',
          duration: 1000
        });
        return;
      }
      uni.showLoading({
        title: '打开中'
      });

      uni.downloadFile({
        url: fileUrl, // 文件的本身url
        filePath: wx.env.USER_DATA_PATH + '/顾问简历诊断解析' + '.pdf', // 本地自定义的文件名
        success: function (res) {
          let filePath = res.filePath;
          uni.openDocument({
            filePath: filePath,
            success: function () {
              uni.hideLoading();
            },
            fail: function () {
              uni.hideLoading();
            }
          });
          uni.hideLoading();
        },
        fail: function (res) {
          uni.hideLoading();
          uni.showToast({
            icon: 'none',
            title: '链接已经过期！',
            duration: 1000
          });
        },
        complete: (res) => {
          console.log('complete', res);
        }
      });
    },
    closePopup() {
      this.showPopup = false;
    },
    showBuyList() {
      this.showPopup = true;
      this.currentPackage = 0;
    },
    addOrRemoveOneService(item, index) {
      if (item.isChoosen == false) {
        this.addOneService(item, index);
      } else {
        this.cancelOneService(item, index);
      }
    },
    addOneService(item, index) {
      item.isChoosen = true;
      // 判断是一级还是二级
      if (item.productList) {
        if (this.currentPackage == 0) {
          item.productList.forEach((element) => {
            // 如果是false才要加钱 否则会重复计算
            if (element.isChoosen == false) {
              this.sumPrice += element.price;
              this.chosenNum += 1;
              this.discountPrice += element.originPrice - element.price;
              element.isChoosen = true;
            }
          });
        } else {
          this.chosenNum += 1;
          item.productList.forEach((element) => {
            // 如果是false才要加钱 否则会重复计算
            this.sumPrice += element.price;
            this.discountPrice += element.originPrice - element.price;
            element.isChoosen = true;
          });
        }
      } else {
        this.sumPrice += item.price;
        this.discountPrice += item.originPrice - item.price;
        this.chosenNum += 1;
        // 此时处于二级菜单 要监测此项点击完后一级的全选是否要打钩或者取消
        // 通过index到原数组中去判断
        this.shopList[index].isChoosen = true;
        this.shopList[index].productList.forEach((_item) => {
          if (_item.isChoosen == false) {
            // 遍历走一遍 如果有false说明没有全选 那么一级菜单就是false
            this.shopList[index].isChoosen = false;
          }
        });
      }
    },
    cancelOneService(item, index) {
      item.isChoosen = false;

      // 判断是一级还是二级
      if (item.productList) {
        if (this.currentPackage == 0) {
          item.productList.forEach((element) => {
            if (element.isChoosen == true) {
              this.sumPrice -= element.price;
              this.discountPrice -= element.originPrice - element.price;

              this.chosenNum -= 1;
              element.isChoosen = false;
            }
          });
        } else {
          this.chosenNum -= 1;
          item.productList.forEach((element) => {
            this.sumPrice -= element.price;
            this.discountPrice -= element.originPrice - element.price;
            element.isChoosen = false;
          });
        }
      } else {
        this.sumPrice -= item.price;
        this.discountPrice -= item.originPrice - item.price;
        this.chosenNum -= 1;
        // 此时处于二级菜单 要监测此项点击完后一级的全选是否要打钩或者取消
        // 通过index到原数组中去判断
        this.shopList[index].isChoosen = true;
        this.shopList[index].productList.forEach((_item) => {
          if (_item.isChoosen == false) {
            // 遍历走一遍 如果有false说明没有全选 那么一级菜单就是false
            this.shopList[index].isChoosen = false;
          }
        });
      }
    },
    async getProductGroupFn() {
      const params = {
        personId: uni.getStorageSync('person-id').slice(2) || undefined,
        id: '1',
        unlockTypeList: [10, 20, 30]
      };
      const res = await getProductGroup(params);
      if (res.code == 200 && Array.isArray(res.data) && res.data.length) {
        this.productSign = res.data[0].productSign;
        if (this.productSign != 'ZHITU_WUHAN_SERVICE') {
          uni.navigateTo({
            url: this.ZHI_TU_PAGE
          });
        }
        this.shopList = res.data;
        this.shopList.forEach((item) => {
          item.isChoosen = false;
          if (item.productList) {
            item.productList.forEach((_item) => {
              _item.isChoosen = false;
            });
          }
          if (item.ladderUnlockRightJson) {
            item.ladderUnlockRightJson.forEach((ele) => {
              ele.services = '';
              ele.rightList.forEach((_ele) => {
                if (ele.services != '') {
                  ele.services = ele.services + ',' + _ele.rightName;
                } else {
                  ele.services = _ele.rightName;
                }
              });
            });
          }
        });
      }
    },
    //获取权益商品信息展示用
    getRightDetail() {
      getRightDetail({
        rightId: this.rightId,
        cardType: this.cardType
      })
        .then((res) => {
          this.rightProductDetail = res.data;
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    gotoPay() {
      if (this.chosenNum > 0) {
        this.shopList.forEach((item) => {
          item.productList.forEach((_item) => {
            if (_item.isChoosen == true) {
              if (this.mallProductId !== '') {
                this.mallProductId =
                  this.mallProductId + ',' + _item.mallProductId;
              } else {
                this.mallProductId = _item.mallProductId;
              }
              if (this.rightProductId !== '') {
                this.rightProductId = this.rightProductId + ',' + _item.id;
              } else {
                this.rightProductId = _item.id;
              }
            }
          });
        });
        this.addCartAndToOrder();
      } else {
        console.log('没有选择商品');
      }
    },
    //1.生成订单
    addCartAndToOrder() {
      //上报提交职途订单事件
      wx.reportEvent('submit_career_path_order', {});
      uni.showLoading({
        title: '生成订单中...',
        mask: true
      });
      addCartAndToOrder({
        orderType: 'ZT_SERVICE',
        mallProductId: this.rightProductDetail.mallProductId,
        channelType: 80,
        sourceType: 3,
        personId: this.personId,
        rightId: this.rightId,
        cardType: this.cardType,
        orderCondition: {
          rightProductId: this.rightProductDetail.id
        }
      })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.addZhituPayOrder(res.data);
          } else {
            uni.hideLoading();
            uni.showToast({
              title: res.status_desc || '生成订单失败',
              icon: 'none',
              duration: 2000
            });
          }
        })

        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: err.status_desc || '生成订单失败',
            icon: 'none',
            duration: 2000
          });
        })
        .finally(() => {});
    },
    //2.通过订单获取支付信息
    addZhituPayOrder(data) {
      addZhituPayOrder({
        ...data,
        orderType: 'ZT_SERVICE',
        wayCode: 'WX_LITE',
        personId: this.personId,
        personName: uni.getStorageSync('personName'),
        openid: uni.getStorageSync('openid')
      })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.requestPayment(res.data);
          } else {
            uni.hideLoading();
            uni.showToast({
              title: res.status_desc || '获取商品信息失败',
              icon: 'none',
              duration: 2000
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: err.status_desc || '获取商品信息失败',
            icon: 'none',
            duration: 2000
          });
        })
        .finally(() => {});
    },
    //3.使用支付信息调用支付
    requestPayment(data) {
      uni.hideLoading();
      if (this.provider.indexOf('wxpay') < 0) {
        return;
      }
      const payData = JSON.parse(data.payData);
      uni.requestPayment({
        provider: this.provider[0],
        timeStamp: payData.timeStamp,
        nonceStr: payData.nonceStr,
        package: payData.package,
        signType: payData.signType,
        paySign: payData.paySign,
        success: (res) => {
          uni.redirectTo({
            url:
              `/pagesSub/userCenter/careerPathV2/components/zhituPayFinish?mallOrderId=` +
              data.orderId
          });
        },
        fail: (err) => {
          uni.showToast({
            title: '支付失败,请您重新支付',
            icon: 'none',
            duration: 3000
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$img-base-careerPath: $img-base + 'careerPath/';

@font-face {
  font-family: 'D-DIN-PRO-700-Bold';
  /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf');
}

@font-face {
  font-family: 'D-DIN-PRO-500-Medium';
  /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/fontFamily/careerPath/D-DIN-PRO-500-Medium.otf');
}

.wrapper {
  height: 100vh;
  // background: linear-gradient(180deg, #e8f9ff 0%, #f4f6f8 100%);
  // background-image: url("https://img3.job1001.com/ypMp/elan/images/careerPath/zhituPayBG.png?v=1");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  // background-attachment: fixed;
  &.discTest {
    background-image: url($img-base-careerPath + 'zhituDiscTestBG_new.png');
  }

  &.careerTest {
    background-image: url($img-base-careerPath + 'zhituCareerTestBG.jpg?v=1');
    background-size: 100% auto;
    height: 4088rpx;
  }

  &.resumeDiagnosis {
    background-image: url($img-base-careerPath + 'zhituResumeDiagnosisBG.png?v=1');
    background-size: 100% auto;
    box-sizing: border-box;
    height: calc(100vh - 90rpx) !important;
  }

  &.careerPathReport {
    background-image: url($img-base-careerPath + 'zhituCareerPathReportBG_new.png');
  }

  &.careerReport {
    background-image: url($img-base-careerPath + 'zhituCareerReportBG_new.png');
  }

  &.aiInterview {
    background-image: url($img-base-careerPath + 'zhituAiInterviewBG_new.png');
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100vw;
    box-sizing: border-box;
  }

  .buyButton {
    position: fixed;
    bottom: 76rpx;
    left: 0;
    display: flex;
    align-items: center;
    /* justify-content: space-around; */
    width: calc(100vw - 80rpx);
    height: 100rpx;
    margin: 0 40rpx;
    z-index: 999;

    .buyPackage,
    .buySingle {
      width: 328rpx;
      height: 88rpx;
      border-radius: 44rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }

    .buyPackage {
      position: relative;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffe0a1;
      line-height: 36rpx;
      background: linear-gradient(270deg, #38342b 0%, #413f3f 100%);

      .least-price {
        position: absolute;
        width: 132rpx;
        height: 34rpx;
        background-image: url($img-base-careerPath + 'jobtestLeastPrice.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: -16rpx;
        left: 64rpx;
      }
    }

    .buySingle {
      font-family: PingFang-SC, PingFang-SC;
      margin-left: 12rpx;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 44rpx;
      background-color: #ff711e;

      view {
        font-size: 24rpx;
      }
    }
  }

  .bottomBtn {
    position: fixed;
    bottom: 76rpx;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    // padding-left: 124rpx;
    width: calc(100vw - 80rpx);
    height: 100rpx;
    margin: 0 40rpx;
    z-index: 999;
    background: #ff711e;
    border-radius: 200rpx;
    background-image: url($img-base-careerPath + 'zhituPaybottomBtnBG.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .textContainer {
      display: flex;
      align-items: flex-end;

      .btnText {
        font-size: 32rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        color: #ffffff;

        .rmb {
          display: inline-block;
          font-size: 26rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #ffe5cd;
          line-height: 40rpx;
          margin-left: 16rpx;
          margin-right: 10rpx;
        }

        .priceNum {
          font-family: D-DIN-PRO-700-Bold;
          font-size: 36rpx;
          font-family: D-DIN-PRO, D-DIN-PRO;
          font-weight: bold;
          color: #ffffff;
          line-height: 40rpx;
        }
      }

      .slashText {
        margin-left: 20rpx;
        font-size: 26rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        color: #ffe5cd;
        line-height: 40rpx;
        text-decoration: line-through;
      }
    }
  }

  .popup-choose-title {
    position: absolute;
    top: 20%;
    width: 100%;
    height: 168rpx;
    background-image: url($img-base-careerPath + 'blackBackground.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 28rpx 28rpx 0rpx 0rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 100000;

    .consultant-service-package-active {
      flex: 1;
      color: #f0cac5;
      padding: 0 42rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 100%;

      .consultant-service-package-active-bg {
        width: 40rpx;
        height: 40rpx;
        background-image: url($img-base-careerPath + 'diamond-active.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 8rpx;
      }
    }

    .consultant-service-package {
      flex: 1;
      color: #a7a0a0;
      padding: 0 42rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 100%;

      .consultant-service-package-bg {
        width: 40rpx;
        height: 40rpx;
        background-image: url($img-base-careerPath + 'diamond.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 8rpx;
      }
    }

    .consultant-service-package-active:after {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      top: 150rpx;
      left: 15%;
      border-right: solid 10px transparent;
      border-left: solid 10px transparent;
      border-bottom: solid 10px #f4f6f8;
    }

    .job-tools-package-active {
      flex: 1;
      color: #f0cac5;
      padding: 0 42rpx;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .job-tools-package {
      flex: 1;
      color: #a7a0a0;
      padding: 0 42rpx;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .job-tools-package-active:after {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      top: 150rpx;
      left: 65%;
      border-right: solid 10px transparent;
      border-left: solid 10px transparent;
      border-bottom: solid 10px #f4f6f8;
    }

    .close-button {
      width: 48rpx;
      height: 48rpx;
      padding: 12rpx;
      box-sizing: border-box;
      background-image: url($img-base + 'career/sharepopupCloseBtn.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      right: 32rpx;
      top: 32rpx;
    }
  }

  .popup-info {
    z-index: 99999;
    position: relative;

    ::v-deep .u-drawer-bottom {
      background-color: #f4f6f8;
    }

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .choose-service {
      height: 80%;
      border-radius: 16rpx;
      background-color: #ffffff;
      width: calc(100% - 32rpx);
      margin: 20rpx 16rpx;
      padding: 34rpx 24rpx;
      box-sizing: border-box;
      overflow-y: scroll;
      position: fixed;

      .shop {
        margin-bottom: 36rpx;

        .shop-name {
          display: flex;
          flex-direction: row;
          align-items: center;
          font-weight: 800;
          font-size: 36rpx;
          color: #111111;
        }

        .discount-content {
          margin-top: 10rpx;
          display: flex;
          flex-direction: row;
          align-items: center;

          .discounts {
            width: 70rpx;
            height: 40rpx;
            border-radius: 6rpx;
            border: 2rpx solid #fb5806;
            font-weight: 400;
            font-size: 24rpx;
            color: #fb5806;
            margin-left: 60rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .discount-name {
            flex: 1;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #fb5806;
            margin-left: 20rpx;
          }
        }

        .shop-desc {
          /* margin-left: 60rpx; */
          width: 100%;
          font-weight: 400;
          font-size: 24rpx;
          color: #888888;

          span {
            color: #ff711e;
            margin: 0 10rpx;
          }
        }

        .desc-box {
          width: calc(100% - 50rpx);
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          /* padding: 0 50rpx; */
          margin-left: 60rpx;
          margin-top: 12rpx;

          .left-desc {
            flex-basis: 90%;
          }

          .right-arrow {
            width: 24rpx;
            height: 24rpx;
            margin-right: 12rpx;
            background-image: url($img-base + 'career/right-arrow.png?v=1');
            background-size: 100% 100%;
          }
        }

        .service-item {
          display: flex;
          flex-direction: row;
          /* align-items: center; */
          margin-top: 42rpx;
          box-sizing: border-box;

          .service-picture {
            width: 148rpx;
            height: 148rpx;
            border-radius: 16rpx;
          }

          .right-card {
            display: flex;
            flex-direction: column;

            .right-card-content {
              display: flex;
              flex-direction: row;
              align-items: top;

              .right-info {
                margin-left: 18rpx;
                width: 450rpx;

                .service-name {
                  font-family: PingFang-SC, PingFang-SC;
                  font-weight: 800;
                  font-size: 32rpx;
                  color: #333333;
                  margin-bottom: 12rpx;
                }

                .service-desc {
                  white-space: normal;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #777777;
                  /* margin-top: 12rpx; */
                  line-height: 40rpx;
                }

                .service-price {
                  margin-top: 12rpx;
                  color: #ff711e;
                  /* font-weight: 800; */
                  font-family: 'D-DIN-PRO-700-Bold';
                  display: flex;
                  flex-direction: row;
                  align-items: center;

                  .old-price {
                    margin-left: 10px;
                    position: relative;
                    padding: 5rpx;

                    .line {
                      position: absolute;
                      top: 50%;
                      width: 100%;
                      height: 2rpx;
                      border: 2rpx solid #af734f;
                    }
                  }
                }
              }
            }

            .bottom-line {
              width: 100%;
              height: 4rpx;
              border: 2rpx solid #eaeaea;
              margin-top: 40rpx;
            }
          }
        }

        .choose-button,
        .choose-sth {
          /* width: 40rpx; d*/
          height: 40rpx;
          border-radius: 32rpx;
          border: 2rpx solid #d3d3d3;
          margin-right: 20rpx;
          flex-basis: 40rpx;
          margin-top: 54rpx;
        }

        .choose-sth {
          background-image: url($img-base-careerPath + 'chooseSth.png');
          background-size: 100%;
        }
      }
    }

    .shopping-operation {
      background-color: #ffffff;
      height: 10vh;
      position: absolute;
      bottom: 0;
      padding: 18rpx 32rpx 30rpx 30rpx;

      .discount-price {
        color: #fb5806;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
      }

      .right-button {
        flex-grow: 1;
        height: 84rpx;
        background-image: url($img-base + 'careerPath/wuhan-buynow3.png');
        background-size: 100% 100%;
        color: #ffffff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        padding: 24rpx 48rpx 20rpx 48rpx;

        span {
          font-family: D-DIN-PRO, D-DIN-PRO;
          font-weight: 800;
          font-size: 32rpx;
        }
      }
    }
  }

  .shopping-operation {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .shopping-cart {
      flex-basis: 360rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;

      .chosen {
        color: #888888;
        font-size: 28rpx;

        span {
          color: #ff711e;
          margin: 0 10rpx;
          font-weight: 800;
        }
      }

      .price {
        color: #222222;
        font-size: 30rpx;

        span {
          color: #ff711e;
          font-size: 34rpx;
          font-family: PingFang-SC, PingFang-SC;
        }
      }
    }
  }
}
</style>
